<template>
  <div class="container">
    <editPageNew
      ref="editPage"
      :showMore="showMore"
      :rightBtnArr="rightBtnArr"
      :moreBtnArr="moreBtnArr"
      :creatInfo="creatInfo"
      showTopTitle
    >
      <template slot="editPageTitle">
        <span class="title">{{ title }}</span>
      </template>
      <el-collapse v-model="activeNames">
        <el-collapse-item name="1">
          <div class="clearF">
            <div class="basic" v-if="basicShow"></div>
          </div>
          <template slot="title"> 基本信息 </template>
          <editForm
            :formConfig="basicConfig"
            ref="basicForm"
            :formData="basicFormData"
          >
          </editForm>
        </el-collapse-item>
      </el-collapse>
    </editPageNew>
  </div>
</template>
<script>
import {
  saveAccident,
  detailsAccident,
  deleteAccident,
} from "@/api/operationManagement/dispatchManagement.js";
export default {
  data() {
    return {
      creatInfo: {},
      title: "",
      id: "",
      accidentType: "",
      pageType: "",
      basicShow: true,
      showMore: false, // 显示更多
      activeNames: ["1"],
      // 基本信息表单
      basicConfig: {
        labelWidth: "121px",
        itemArr: [
          {
            label: "跳闸主变",
            prop: "equipmentName",
            idsStr: "equipmentId",
            equipmentType: "equipmentType",
            deptManage: "deptManage",
            deptManageName: "deptManageName",
            type: "majorEquipment",
            disSearch: true,
            span: 6,
            required: true,
            isHide: true,
          },
          {
            label: "跳闸线路",
            prop: "equipmentName",
            idsStr: "equipmentId",
            equipmentType: "equipmentType",
            deptManage: "deptManage",
            deptManageName: "deptManageName",
            type: "majorEquipment",
            disSearch: true,
            span: 6,
            required: true,
            isHide: true,
          },
          {
            label: "设备管理单位",
            prop: "deptManageName", //多选时，字段要为数组类型
            idsStr: "deptManage",
            multiple: false, //是否多选
            type: "text", //类型
            required: true,
            disabled: true,
            span: 6,
          },
          {
            label: "受影响线路",
            prop: "detstr",
            equipmentType: "equipmentType",
            type: "majorEquipment",
            disSearch: true,
            multiple: true,
            choseData: "choseData",
            span: 6,
            // required: true,
            isHide: true,
          },
          {
            label: "电压等级",
            prop: "voltageGrade",
            type: "select",
            span: 6,
            required: true,
            selectOption: this.$store.getters["dirtData"](
              "dispatch_voltage_grade"
            ),
          },
          {
            label: "检修类型",
            prop: "overhaulType",
            type: "select",
            span: 6,
            required: true,
            selectOption: this.$store.getters["dirtData"](
              "dipatch_overhaul_type"
            ),
          },
          {
            label: "开始时间",
            prop: "startTime",
            type: "datetime",
            trigger: "change",
            span: 6,
            required: true,
          },
          {
            label: "结束时间",
            prop: "endTime",
            type: "datetime",
            trigger: "change",
            span: 6,
            required: true,
          },
          {
            span: 12,
            isHide: true,
          },
          {
            label: "保护动作",
            prop: "protections",
            type: "textarea",
            span: 12,
            rows: 6,
            placeholder: "请输入",
          },
          {
            label: "事故原因",
            prop: "accidentReason",
            type: "textarea",
            span: 12,
            rows: 6,
            placeholder: "请输入",
          },
          {
            label: "检查结果",
            prop: "inspectRes",
            type: "textarea",
            span: 12,
            rows: 6,
            placeholder: "请输入",
          },
          {
            label: "送电情况",
            prop: "sendElecticMsg",
            type: "textarea",
            span: 12,
            rows: 6,
            placeholder: "请输入",
          },
        ],
      },
      // 基本信息表单数据
      basicFormData: {},
    };
  },
  computed: {
    // 操作按钮
    rightBtnArr() {
      let arr = [
        {
          text: "保存",
          icon: "icon-baocun",
          disabled: !this.$store.getters.isBtnAuth("save"),
          content: "未授权的功能",
          methods: () => {
            this.save();
          },
        },
        {
          text: "删除",
          hide: !this.id,
          icon: "icon-shanchu",
          disabled: !this.$store.getters.isBtnAuth("delete"),
          content: "未授权的功能",
          methods: () => {
            this.delete();
          },
        },
      ];
      return arr;
    },
    // 更多按钮
    moreBtnArr() {
      let arr = [
        {
          text: "操作记录",
          disabled: !this.$store.getters.isBtnAuth("operationRecords"),
          content: "未授权的功能",
          methods: () => {
            this.$refs.editPage.showOperate();
          },
        },
      ];
      return arr;
    },
  },
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    // 页面初始化信息
    init() {
      let accidentVal = JSON.parse(this.$route.query.accidentVal);
      this.pageType = this.$route.query.pageType;
      this.accidentType = accidentVal.accidentType;
      this.basicFormData.equipmentType = this.accidentType;
      if (this.accidentType == "TRAN") {
        // 主变
        this.title = "主变事故跳闸记录";
        this.basicConfig.itemArr[0].isHide = false;
        this.basicConfig.itemArr[8].isHide = false;
      } else if (this.accidentType == "LINE") {
        // 线路
        this.title = "线路事故跳闸记录";
        this.basicShow = false;
        this.basicConfig.itemArr[1].isHide = false;
        this.basicConfig.itemArr[3].isHide = false;
      }
      if (this.pageType === "edit") {
        // 详情
        this.showMore = true;
        this.basicConfig.itemArr[2].disabled = true;
        this.id = accidentVal.id;
        this.getDetails(this.id);
      }
    },
    // 填写状态保存或提交
    async save() {
      let data = await this.$refs.basicForm.getFormData();
      if (data.choseData) {
        data.choseData.forEach((item) => {
          item.accidentId = data.id;
          item.id = "";
        });
        data.det = data.choseData;
        delete data.choseData;
      }
      await saveAccident(data).then((res) => {
        if (res.code == 200) {
          // this.$message.success(res.description);
          this.$message.success("保存成功！");
          this.updateListData();
          if (this.id) {
            this.$utils.addOperateLog(this.id, `修改了事故跳闸记录`);
            this.getDetails(this.id);
          } else {
            this.id = res.data;
            let data = { accidentType: this.accidentType, id: res.data };
            let obj = {
              pageType: "edit",
              accidentVal: JSON.stringify(data),
            };
            this.$router.push({
              query: obj,
            });
            this.$utils.addOperateLog(res.data, `新建了事故跳闸记录`);
            this.getDetails(res.data);
          }
        }
      });
    },
    //获取详情信息
    async getDetails(id) {
      let val = { id };
      await detailsAccident(val).then((res) => {
        if (res.code == 200) {
          this.basicFormData = res.data;
          this.basicFormData.detstr = res.data.detstr ? res.data.detstr : "";
          this.basicFormData.choseData = res.data.det;
          this.creatInfo = res.data;
        }
      });
    },
    // 删除
    async delete() {
      if (this.id) {
        let val = { id: this.id };
        this.$confirm(`是否确认删除`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            deleteAccident(val).then((res) => {
              if (res.code == 200) {
                // this.$message.success(res.description);
                this.$message.success("删除成功！");
                this.updateListData();
                this.$refs.editPage.closePage();
              }
            });
          })
          .catch((e) => {});
      } else {
        this.$message.warning("当前信息没有保存。");
      }
    },
    /* 更新列表页的数据 */
    updateListData() {
      /* 通过localStorage来实现浏览器不同窗口之间的通信 */
      let num = Math.floor(Math.random() * 1000) + 1; //产生随机数，保证每次的值都不一样
      localStorage.setItem("update", num); //设置localStorage里面的值，保证每次都会触发storage事件
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  height: 100%;
  width: 100%;
  // overflow: hidden;
  background-color: #ffffff;
  .title {
    font-size: 14px;
    font-weight: 500;
    color: #000;
    background: #f2f2f2;
    padding: 4px 10px;
    border-radius: 14px;
  }
  .clearF::after {
    content: "";
    display: block;
    clear: both;
    overflow: hidden;
    height: 0;
  }
  .basic {
    position: relative;
    top: 107px;
    z-index: 1;
    background: #fff;
    float: right;
    height: 50px;
    width: 50%;
  }
  /deep/ .el-textarea__inner {
    font-size: 14px;
  }
}
</style>